<template>
	<view class="searchGoodsListPage-container" :style="{ 'padding-top': topFixedHeight + 'px' }">
		<view class="topFixed">
			<!-- 搜索框区域 -->
			<view class="search-input-box" :style="{ 'min-height': searchInputHeight + 'px', 'padding-top': searchInputPT + 'px' }">
				<image @click="goBack" src="@/static/common/back-icon.png" class="backIcon"></image>
				<view class="input-box">
					<image src="@/static/common/search-icon.png" class="searchIcon"></image>
					<input @confirm="toSearch" v-model="goodsKeywords" type="text" class="searchInput" placeholder="请搜索商品标题" placeholder-style="color: #BFBFBF;font-size: 14px" />
					<view @click="toSearch" class="searchBtn">搜索</view>
				</view>
			</view>
			<!-- 购物平台列表区域 -->
			<view class="platform-tabs-list">
				<view
					@click="choosePlatform(item, index)"
					v-for="(item, index) in platformTabsList"
					:key="index"
					class="platform-tabs-list-item"
					:class="{ activePlatformTab: activePlatformTab.platform == item.platform }"
				>
					<text class="platform-tabs-list-item-name">{{ item.platformName }}</text>
				</view>
			</view>
			<!-- 筛选排序区域 -->
			<view v-if="activePlatformTab?.sortList?.length" class="filter-sort-box">
				<sortBar ref="sortBarRef" @toggleSort="toggleSort" @openFilter="openFilter" v-model:sortList="activePlatformTab.sortList" v-model:rankList="activePlatformTab.rankList" v-model:isConfirm="isConfirm" />
			</view>
		</view>

		<view class="goods-list-container" :style="{ 'height': goodsListScrollHeight }">
			<z-paging ref="paging" :fixed="false" v-model="goodsList" @query="queryList">
				<template #loadingMoreNoMore>
					<div style="text-align: center; color: #999; padding-bottom: 24rpx">没有更多了</div>
				</template>
				
				<template #empty>
					<view class="goods-list-empty-box">
						<image src="@/static/common/empty-icon.png" class="empty-icon"></image>
						<view class="empty-text">暂无搜索内容</view>
						<view @click="goBack" class="back-btn">返回上级</view>
					</view>
				</template>
				
				<goodsListCom :goods-list="goodsList" :key="key" @scrolltolower="scrollBottom" :style="{ 'height': !goodsList.length ? '0px' : 'auto' }" />
			</z-paging>
		</view>
	</view>

	<!-- 范围筛选弹窗 -->
	<u-popup v-model="rangeFilterShow" mode="right" border-radius="24">
		<view class="rangeFilter-container">
			<scroll-view scroll-y="true" class="rangeFilter-scrollView" style="height: 600px;">
				<view v-for="(item,index) in filterRangeList" :key="index" class="range-item">
					<view class="range-item-title">{{ item.title }}</view>
					<view class="range-item-content">
						<view class="range-item-content-input-box">
							<input v-model="item.min" type="digit" class="range-item-content-input" placeholder="最低价" maxlength="8"></input>
						</view>
						<text class="range-gap-text">至</text>
						<view class="range-item-content-input-box">
							<input v-model="item.max" type="digit" class="range-item-content-input" placeholder="最高价" maxlength="8"></input>
						</view>
					</view>
				</view>
			</scroll-view>
			
			<view class="btn-box">
				<view @click="resetRangeFilter" class="btn reset">重置</view>
				<view @click="confirmRangeFilter" class="btn confirm">确认</view>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
import { ref, computed, nextTick, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import sortBar from '@/uni_modules/sort-bar/components/sort-bar/sort-bar.vue';
import goodsListCom from '@/components/goodsList/index.vue';
import getNavBarHeight from '@/utils/getNavBarHeight';
import utils from '@/utils/common.js';
import { getGoodsSortMenu, getSearchGoods } from '@/api/home.js';
let { statusBarHeight, navBarHeight, capsuleHeight } = getNavBarHeight();

// 计算搜索框高度
const searchInputHeight = computed(() => {
	return statusBarHeight + navBarHeight + capsuleHeight;
});

// 计算搜索框顶部边距
const searchInputPT = computed(() => {
	return statusBarHeight + capsuleHeight + 12;
});

// 顶部固定区域高度
const topFixedHeight = ref('auto');
// 商品列表滚动区域高度
const goodsListScrollHeight = ref('auto')

onMounted(() => {
	getGoodsSortMenuFun();
})

// 计算商品列表区域的高度
const getGoodsListScrollHeight = () => {
	uni.$u.getRect('.topFixed').then(res => {
		topFixedHeight.value = res.height;
		goodsListScrollHeight.value = `calc(100vh - ${topFixedHeight.value}px)`;
	})
};

// 平台tab切换列表
const activePlatformTab = ref({});
const platformTabsList = ref([]);

// 获取商品排序菜单
const getGoodsSortMenuFun = async () => {
	let res = await getGoodsSortMenu();
	if (res.code == 0) {
		activePlatformTab.value = res.data[0];
		platformTabsList.value = res.data;
		
		nextTick(() => {
			getGoodsListScrollHeight();
		})
	}
};

// 切换商品平台
const choosePlatform = (item, index) => {
	console.log(item, index);
	isConfirm.value = false;
	sortBarRef.value.resetSort();
	activePlatformTab.value = item;
	
	nextTick(() => {
		getGoodsListScrollHeight();
	})
	
	paging.value.reload()
};

// 切换排序
const sortBarRef = ref(null);
const rangeFilterShow = ref(false);
const currentSort = ref({});
const toggleSort = (e) => {
	console.log(e);
	currentSort.value = e;
	paging.value.reload();
};

// 区间筛选
const filterRangeList = ref([]);
const openFilter = (rangeList) => {
	console.log('activePlatformTab.value.rankList', activePlatformTab.value.rankList);
	activePlatformTab.value.rankList.forEach(item => {
		if (!item.hasOwnProperty('min') && !item.hasOwnProperty('max')) {
			item.min = '';
			item.max = '';
		}
	})
	
	filterRangeList.value = rangeList;
	console.log('filterRangeList.value',	 filterRangeList.value);
	rangeFilterShow.value = true;
};

// 确认区间筛选
const isConfirm = ref(false);
const confirmRangeFilter = () => {
	console.log('filterRangeList.value', filterRangeList.value);
	rangeFilterShow.value = false;
	isConfirm.value = true;
	paging.value.reload();
};

// 重置区间筛选
const resetRangeFilter = () => {
	activePlatformTab.value.rankList.forEach(item => {
		item.min = '';
		item.max = '';
	});
	rangeFilterShow.value = false;
	isConfirm.value = false;
	paging.value.reload();
};

// 查询商品列表数据分页
const goodsKeywords = ref('');
const goodsList = ref([]);
const total = ref('');
const paging = ref(null);
const key = ref(0)
const queryList = async (pageNo, pageSize) => {
	console.log(pageNo, pageSize);
	key.value = Math.random();
	
	let platformSortList = [];
	if (activePlatformTab.value?.sortList?.length) {
		let sortObj = {}
		sortObj.type = currentSort.value.type;
		if (currentSort.value.type == 1) {
			sortObj.sortStr = currentSort.value.sortStr;
		} else if (currentSort.value.type == 2) {
			sortObj.sortStr = currentSort.value.sortTypeValue.sortStr;
		}
		

		if (sortObj.sortStr && sortObj.type) {
			platformSortList.push(sortObj);
		}
	}
	if (activePlatformTab.value?.rankList?.length) {
		activePlatformTab.value?.rankList.forEach(rank => {
			let rankObj = {};
			
			rankObj.sortStr = rank.sortStr;
			rankObj.type = rank.type;
			rankObj.min = rank.min;
			rankObj.max = rank.max;
			
			if (Object.keys(rankObj).length && (rankObj.min || rankObj.max)) {
				platformSortList.push(rankObj);
			}
		})
	}
	
	let res = await getSearchGoods({
		pageNum: pageNo,
		pageSize: pageSize,
		platform: activePlatformTab.value.platform,
		keyword: goodsKeywords.value,
		platformSortList,
	})
	
	if (res.code == 0) {
		paging.value.completeByTotal(res.data.rows, res.data.total);
	}
};

// 搜索
const toSearch = () => {
	if (!goodsKeywords.value) {
		uni.showToast({
			title: '请输入搜索关键词',
			icon: 'none'
		});
		return;
	}
	
	paging.value.reload();
};

// 返回上一页
const goBack = () => {
	uni.navigateBack();
};

onLoad((options) => {
	goodsKeywords.value = options.goodsKeywords;
});
</script>

<style lang="scss">
.searchGoodsListPage-container {
	height: 100vh;
	background-color: #f9f9f9;

	.topFixed {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		background-color: #f9f9f9;

		.search-input-box {
			display: flex;
			align-items: center;
			padding: 12px 12px 0px 26px;

			.backIcon {
				width: 10px;
				height: 16px;
				margin-right: 20px;
			}

			.input-box {
				flex: 1;
				display: flex;
				align-items: center;
				height: 40px;
				padding-left: 14px;
				border-radius: 32px;
				background-color: #fff;

				.searchIcon {
					width: 12.38px;
					height: 13.87px;
					margin-right: 9px;
				}

				.searchInput {
					flex: 1;
					font-size: 14px;
					line-height: 14px;
					
					&::placeholder {
						font-size: 14px;
						line-height: 14px;
					}
				}

				.searchBtn {
					color: #ff0309;
					width: 64px;
					font-size: 14px;
					font-weight: 500;
					line-height: 16px;
					text-align: center;
					margin-left: 10px;
					border-left: 1px solid rgba(255, 61, 59, 0.2);
				}
			}
		}

		.platform-tabs-list {
			width: 100vw;
			height: 36px;
			background-color: #f9f9f9;
			overflow-x: scroll;
			white-space: nowrap;
			margin-bottom: 12px;

			// 隐藏滚动条
			&::-webkit-scrollbar {
				display: none;
			}

			.platform-tabs-list-item {
				position: relative;
				flex: 1;
				display: inline-block;
				text-align: center;
				width: calc(100vw / 4);
				font-size: 14px;
				font-weight: 400;
				line-height: 36px;
			}

			.activePlatformTab {
				color: #ff0309;
				font-weight: 600;

				.platform-tabs-list-item-name {
					position: relative;
					background-image: linear-gradient(90deg, #ff0309 0%, #ff6c2a 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;

					&::after {
						content: '';
						position: absolute;
						bottom: -6px;
						left: 50%;
						transform: translateX(-50%);
						width: 80%;
						height: 3px;
						border-radius: 2px;
						background: linear-gradient(90deg, #ff0309 0%, #ff6c2a 100%);
					}
				}
			}
		}

		.filter-sort-box {
			width: 100vw;
			padding: 12px 25px;
			border-radius: 12px 12px 0 0;
			background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(249, 249, 249, 1));
		}
	}

	.goods-list-container {
		padding: 12px;
	}
}

.rangeFilter-container {
	display: flex;
	flex-direction: column;
	position: relative;
	height: 100%;
	padding: 50px 12px 98px;
	background-color: #fff;

	.rangeFilter-scrollView {
		flex: 1;
		
		.range-item {
			width: 70vw;
			margin-bottom: 20px;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.range-item-title {
				color: #333;
				font-size: 14px;
				font-weight: 500;
				line-height: 19.6px;
				margin-bottom: 10px;
			}
			
			.range-item-content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.range-item-content-input-box {
					padding: 10px;
					border-radius: 38px;
					background-color: #F6F6F6;
					
					.range-item-content-input {
						font-size: 12px;
						font-weight: 400;
						line-height: 18px;
						text-align: center;
						
						&::placeholder {
							color: red;
							font-size: 12px;
							font-weight: 400;
						}
					}
				}
				
				.range-gap-text {
					font-size: 12px;
					font-weight: 400;
					line-height: 18px;
					margin: 0 8px;
				}
			}
		}
	}
	
	.btn-box{
		position: fixed;
		display: flex;
		gap: 12px;
		align-items: center;
		justify-content: space-between;
		left: 0;
		bottom: 0px;
		width: 100%;
		height: 98px;
		z-index: 999;
		padding: 0 12px;
		background-color: #fff;
		
		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 130px;
			height: 50px;
			font-size: 16px;
			font-weight: 500;
			border-radius: 34px;
		}
		
		.reset {
			color: #FF0309;
			border: 1px solid #FF0309;
			background-color: #fff;
		}
		
		.confirm {
			color: #fff;
			background: linear-gradient(90deg, #FF0309 0%, #FF6C2A 100%);
		}
	}
}

.goods-list-empty-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	
	.empty-icon {
		width: 120px;
		height: 120px;
		margin-bottom: 20px;
	}
	
	.empty-text {
		color: #333;
		font-size: 14px;
		font-weight: 500;
		line-height: 20px;
		text-align: center;
		margin-bottom: 32px;
	}
	
	.back-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FF0309;
		width: 150px;
		height: 50px;
		font-size: 16px;
		font-weight: 500;
		line-height: 22.4px;
		border-radius: 34px;
		border: 1px solid #FF0309
	}
}
</style>
